<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
#include("_common/head.html")
<!-- 样 式 文 件 -->
<link rel="icon" type="image/x-icon" href="#SITE('icon')">
<link rel="shortcut icon" type="image/x-icon" href="#SITE('icon')">
<link rel="stylesheet" href="#CTX()/pear/admin/css/other/login.css?_v=#VERSION()" />
<link rel="stylesheet" href="#CTX()/aj-captcha/css/verify.css?_v=#VERSION()" />
<style type="text/css">
.layui-input {
	padding-left: 36px !important;
}
</style>
</head>
<!-- 代 码 结 构 -->
<body background="#CTX()/pear/admin/images/background.svg?_v=#VERSION()" style="background-size: cover;">
    <div id=captcha-box></div>
    <form class="layui-form" action="javascript:void(0);" lay-filter="login-form">
        <div class="layui-form-item">
            <img class="logo" src="#SITE('icon')" />
            <div class="title">#SITE("title")</div>
            <div class="desc">后端程序员也能轻易把握的框架</div>
        </div>
        <div class="layui-form-item">
	        <div class="layui-input-wrap">
		        <div class="layui-input-prefix">
		            <i class="layui-icon layui-icon-username"></i>
		        </div>
	            <input type="text" name="account" value="#(account??)" lay-verify="required|account" placeholder="账号" lay-reqtext="请填写登录账号" autocomplete="off" class="layui-input" lay-affix="clear">
	        </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
    	        <div class="layui-input-prefix">
    	            <i class="layui-icon layui-icon-password"></i>
    	        </div>
                <input type="password" name="password" value="#(password??)" lay-verify="required|password" placeholder="密码" lay-reqtext="请填写登录密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
	        <input type="checkbox" name="remember" lay-skin="primary" title="记住我">
      		<a href="#forget" style="float: right; margin-top: 7px;" class="layui-hide">忘记密码？</a>
    	</div>
        <div class="layui-form-item">
            <button id="login-button" type="button" class="pear-btn pear-btn-success login" lay-submit lay-filter="login">登入系统</button>
        </div>
        <input id="captchaVerification" name="captchaVerification" type="hidden"/>
    </form>
<!-- 资 源 引 入 -->
#include("_common/foot.html")
<script src="#CTX()/pear/component/pear/module/tinymce/tinymce/plugins/kityformula-editor/kityformula/js/jquery-3.6.0.min.js?_v=#VERSION()"></script>
<script src="#CTX()/aj-captcha/js/crypto-js.js?_v=#VERSION()"></script>
<script src="#CTX()/aj-captcha/js/ase.js?_v=#VERSION()"></script>
<script src="#CTX()/aj-captcha/js/verify.js?_v=#VERSION()"></script>

<script>
layui.use(['form', 'button', 'popup', 'context'], () => {
    var $ = layui.jquery, form = layui.form, button = layui.button, popup = layui.popup, context = layui.context;
    
    var MODULE_PATH = "#CTX()/admin/";
    
    $('#captcha-box').slideVerify({
        baseUrl: '#CTX()/aj-captcha',  // 服务器请求地址, 默认地址为安吉服务器;
        containerId: 'login-button',// pop模式 必填 被点击之后出现行为验证码的元素id
        mode: 'pop',     // 展示模式
        beforeCheck: () => {  // 检验参数合法性的函数  mode ="pop"有效
            // 实现: 参数合法性的判断逻辑, 返回一个boolean值
            return true;
        },
        ready: () => {},  //加载完毕的回调
        success: (params) => { //成功的回调
            // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
            $("#captchaVerification").val(params.captchaVerification);
            // 登录
            window.login();
        },
        error: () => {layer.alert("获取失败");}        //失败的回调
    });
    
    /*
     * 登录
     */
    window.login = () => {
        $.ajax({
            url: MODULE_PATH + "login",
            dataType: 'json',
            data: form.val("login-form"),
            type: 'post',
            beforeSend : () => {layer.load(1);}, // 防止重复操作
            complete: () => {layer.closeAll('loading');}, //解除防重复操作
            success: (result) => {
                if (result.code == 200) {
                	// 保存记住我状态
                	context.put("rememberMe", form.val("login-form").remember);
                	
                    // 动画
                    popup.success("登录成功", () => {
                        location.href = "#CTX()/admin";
                    });
                } else {
                    popup.failure(result.description, () => {
                        return;
                    });
                }
            },
            error: (e) => { // Ajax调用失败
                var result = JSON.parse(e.responseText)
                if (result.code){
                    layer.alert("操作失败：" + result.description, {icon: 2});
                } else {
                    layer.alert("操作失败：", {icon: 2});
                }
            }
        })
    }
    
    $(document).ready(() => {
    	// 更新记住我状态
        if (context.get("rememberMe") == 'on') {
        	form.val("login-form", {"remember": context.get("rememberMe")});
        }
    });

})
</script>
</body>
</html>
